<style>
  .products {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
  }

  .products_right {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
  }

  .logo {
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 180px;
    background-color: #0085E8;
    align-items: center;
    display: flex;
    justify-content: center;
    /*box-shadow: 0px 0px 5px #197cc5;*/
  }

  .font {
    margin-left: 5px;
    font-family: 华文行楷;
    font-size: 20px
  }
</style>
<template>


  <div class="header" @updateInfo="updateInfo">
    <div class="products">
      <div class="products_right">
        <div class="logo">
          <img src="../assets/logo.png" height="40px" width="40px">
          <span class="font">成果管理系统</span>
        </div>


        <img class="radius" :src="userimage" @click="link_userinfo" style="height: 40px;width: 40px;margin-left: 10px;cursor: pointer">
        <span class="ml-15 ">{{username}}</span>
        <span class="ml-15">{{rolename}}</span>
        <span v-on:click="logout" class="ml-15" style="cursor: pointer">退出</span>
      </div>
    </div>

  </div>

</template>


<script>
  export default {
    name: 'headers',
    data() {
      return {
        userinfo: '',
        username: '信息工程学院',
        userimage: "",
        rolename: ""
      }
    },
    methods: {

      link_userinfo: function () {
        // alert("点击了头像")/student/index/personal_information
          this.$router.push({name: "TPersonal_information"});
          this.$cookie.set("indexs",2)
      },
      logout: function () {
        //退出登录   无需发起网络请求  删除本地cookie 和localS
        localStorage.removeItem("JWT_TOKEN");
        this.$cookie.set('userid');
        window.location.href = "/"

      },
      updateInfo(){
        var userinfo  = this.UserInfo.getUserInfo()
        var faceimg = userinfo.faceIcon
        var spit =  faceimg.replace(".png","_120x120.png")
        this.userimage = spit
      }
    },
    created: function () {
    //加载头像 用户名
      var userinfo  = this.UserInfo.getUserInfo()
     var rles =  this.UserInfo.getUserRole();

        var faceimg = userinfo.faceIcon
      if(faceimg!=null)
     var spit =  faceimg.replace(".png","_120x120.png")
      this.userimage = spit


      for (let i = 0; i < rles.length; i++) {
        if(rles[i].rname==="student")
         this.username =  userinfo.name
        else
          this.username =  userinfo.teaname
        this.rolename = rles[i].nameZn
      }


    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
